<template>
  <div style="height: 100%;">
    <!--  线性回归 -->
    <div class="linear">
      <div class="m_title">
        <div class="divider"></div>
        <strong>模型结果</strong>
      </div>
      <div class="right-text" align="right">
        <a-tooltip
          placement="topRight"
          :overlay-style="{ width: '100%', align: 'right' }"
        >
          <template slot="title">
            <span>{{
              `${modelData.param && modelData.param.label_col}~${
                modelData.data && modelData.data.feature_list.toString()
              }`
            }}</span>
          </template>
          <div class="tooltip-text">
            {{
              `${modelData.param && modelData.param.label_col}~${
                modelData.data && modelData.data.feature_list.toString()
              }`
            }}
          </div>
        </a-tooltip>
      </div>
      <div
        class="result"
        :style="{
          height:
            modelData.data && modelData.data.coefficients.length > 1
              ? '300px'
              : '222px',
        }"
      >
        <div class="left-block four-scroll-y">
          <!-- <a-table
          style="height: 100%;"
           v-if="modelData.data"
            :columns="columns"
            :data-source="data"
            bordered
          ></a-table> -->
          <table class="lr_table" style="height: 100%;">
            <tr>
              <th scope="row">name</th>
              <th scope="row">coef</th>
              <th scope="row">t</th>
              <th scope="row">p > |t|</th>
            </tr>
            <tr
              v-for="(item, index) in modelData.data && modelData.data.tvalues"
              :key="index"
            >
              <td>
                {{
                  index === 0
                    ? 'intercept'
                    : modelData.data.feature_list[index - 1]
                }}
              </td>
              <td>
                {{
                  index === 0
                    ? modelData.data.intercept
                    : modelData.data.coefficients[index - 1]
                }}
              </td>
              <td>{{ modelData.data.tvalues[index] }}</td>
              <td>{{ modelData.data.pvalues[index] }}</td>
            </tr>
          </table>
        </div>
        <div class="right-block four-scroll-y">
          <a-row
            v-for="(item, index) in modelData.data &&
            modelData.data.feature_list"
            :key="item"
          >
            <a-col :span="6" class="feature">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ item }}</span>
                </template>
                <span>{{ item }}：</span>
              </a-tooltip>
            </a-col>
            <a-col :span="14">
              <div
                v-if="
                  modelData.data.coefficients &&
                  modelData.data.coefficients[index] === 0
                "
                class="red-block"
                style="width: 1px;"
              ></div>
              <div
                v-else-if="
                  modelData.data.coefficients &&
                  modelData.data.coefficients[index] > 0
                "
                class="red-block"
                :style="{ width: getWidth(modelData.data.coefficients[index]) }"
              ></div>
              <div
                v-else
                class="blue-block"
                :style="{
                  width: getWidth(modelData.data.coefficients[index]),
                  marginLeft: getWidth(
                    modelData.data.coefficients[index],
                    true
                  ),
                }"
              ></div>
            </a-col>
            <a-col :span="1"></a-col>
            <a-col :span="3" align="left">{{
              '  ' + modelData.data.coefficients &&
              modelData.data.coefficients[index]
            }}</a-col>
          </a-row>
        </div>
      </div>
      <div class="m_title">
        <div class="divider"></div>
        <strong>整体评估</strong>
      </div>
      <table class="lr_table">
        <tr>
          <th scope="row">df</th>
          <th scope="row">MSE</th>
          <th scope="row">MAE</th>
          <th scope="row">RMSE</th>
          <th scope="row">R²</th>
          <th scope="row">R²adj</th>
        </tr>
        <tr>
          <td>{{ modelData.data ? modelData.data.df : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.MSE : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.MAE : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.RMSE : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.r2 : '-' }}</td>
          <td>{{ modelData.data ? modelData.data.r2adj : '-' }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: {},
})
export default class LinearRegression extends Vue {
  public columns = [
    {
      title: 'name',
      key: 'name',
      dataIndex: 'name',
      slots: { title: 'customTitle' },
    },
    {
      title: 'coef',
      dataIndex: 'coef',
      key: 'coef',
      scopedSlots: { customRender: 'coef' },
    },
    {
      title: 't',
      dataIndex: 't',
      key: 't',
    },
    {
      title: 'p > |t|',
      dataIndex: 'p',
      key: 'p',
    },
  ]

  public data: any = []
  public featureString: string | null = null

  public get modelData() {
    return DataViewStore.selectModel
  }

  @Watch('modelData.data')
  public getModelData() {
    this.init()
  }

  public created() {
    this.init()
  }

  public init() {
    const { data } = this.modelData
    this.featureString = data?.feature_list?.toString()
    data?.tvalues?.forEach((element: any, index: any) => {
      let item: any = {}
      if (index === 0) {
        item = {
          name: 'intercept',
          coef: data?.intercept,
          t: data?.tvalues[index],
          p: data?.pvalues[index],
          ...data?.feature_list,
        }
      } else {
        item = {
          name: data?.feature_list[index - 1],
          coef: data?.coefficients[index - 1],
          t: data?.tvalues[index],
          p: data?.pvalues[index],
        }
      }
      this.data.push(item)
    })
  }

  public getWidth(value: any, margin: boolean | null) {
    const array: any = []
    this.modelData?.data?.coefficients?.forEach((element: any) => {
      if (element < 0) {
        array.push(Math.abs(element))
      } else {
        array.push(element)
      }
    })
    if (margin) {
      return `${50 - (Math.abs(value) * 50) / Math.max(...array)}%`
    }
    return `${(Math.abs(value) * 50) / Math.max(...array)}%`
  }
}
</script>

<style lang="less" scoped>
@import '@/styles/scroll-bar';

.m_title {
  align-items: center;
  display: flex;
  margin-bottom: 22px;

  b {
    font-size: 16px;
  }
}

.divider {
  background-color: #6973ff;
  height: 18px;
  margin-right: 8px;
  width: 4px;
}

.right-text {
  height: 21px;
  margin-bottom: 8px;
  margin-top: -6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;

  .tooltip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .detail {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    box-shadow: 0 9px 28px 8px rgba(0, 0, 0, 0.05),
      0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12);
    color: #fff;
    max-width: 90%;
    padding: 8px;
    position: absolute;
    right: 24px;
    top: 315px;
    white-space: normal;
    z-index: 99;
  }

  &:hover {
    .detail {
      display: inline-block;
    }
  }
}

.linear {
  .result {
    align-items: center;
    display: flex;
    margin-bottom: 24px;

    .left-block {
      height: 100%;
      overflow: auto;
      width: 50%;
    }

    .right-block {
      background: #fafafa;
      height: 100%;
      margin-left: 40px;
      overflow: auto;
      padding: 16px 22px;
      width: 50%;

      .feature {
        overflow: hidden;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .red-block {
        background: rgba(242, 99, 123, 0.54);
        height: 18px;
        margin-left: 50%;
        // width: 50%;
      }

      .blue-block {
        background: rgba(58, 160, 255, 0.6);
        height: 18px;
        // width: 50%;
      }
    }
  }
}

.lr_table {
  border-collapse: collapse;
  border-color: #e8e8e8;
  line-height: 36px;
  min-height: 36px;
  text-align: center;
  width: 100%;

  th {
    background: #fafafa;
  }
}

.lr_table tr th,
.lr_table tr td {
  border: 1px solid #e8e8e8;
}
</style>
